<template>
  <view class="container">
    <!-- 功能一：图片选择与预览 -->
    <view class="module">
      <h2>图片选择与预览</h2>
      <button @click="chooseAndPreviewImage" class="btn">选择本地图片</button>
      <view class="image-container">
        <image 
          v-for="(img, index) in selectedImages" 
          :key="index" 
          :src="img" 
          mode="aspectFill" 
          class="preview-image"
          @click="previewImage(index)"
        ></image>
      </view>
    </view>

    <!-- 功能二：天气预报信息 -->
    <view class="module">
      <h2>明日天气预报</h2>
      <button @click="fetchWeather" class="btn">获取天气</button>
      <view class="weather-card" v-if="weatherInfo">
        <p>日期：{{ weatherInfo.date }}</p>
        <p>星期：{{ weatherInfo.week }}</p>
        <p>最高温：{{ weatherInfo.high }}</p>
        <p>最低温：{{ weatherInfo.low }}</p>
      </view>
      <view class="empty-tip" v-else>点击按钮获取天气信息</view>
    </view>

    <!-- 功能三：网络图片下载 -->
    <view class="module">
      <h2>网络图片下载与显示</h2>
      <button @click="downloadNetImage" class="btn">下载图片</button>
      <view class="download-status">
        <p v-if="downloadProgress > 0">下载进度：{{ downloadProgress }}%</p>
        <image 
          :src="downloadedImagePath" 
          mode="aspectFit" 
          class="downloaded-image"
          v-if="downloadedImagePath"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedImages: [], // 功能一：存储选中的图片路径
      weatherInfo: null,  // 功能二：存储天气信息
      downloadProgress: 0, // 功能三：下载进度
      downloadedImagePath: '' // 功能三：下载完成的图片路径
    };
  },
  methods: {
    // 功能一：选择并预览图片
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 3, // 最多选3张
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.selectedImages = res.tempFilePaths;
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        }
      });
    },
    previewImage(index) {
      uni.previewImage({
        current: this.selectedImages[index],
        urls: this.selectedImages,
        indicator: 'default'
      });
    },

    // 功能二：获取天气预报
    fetchWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.data && res.data.data.forecast) {
            const tomorrow = res.data.data.forecast[1];
            this.weatherInfo = {
              date: tomorrow.date,
              week: tomorrow.week,
              high: tomorrow.high,
              low: tomorrow.low
            };
          } else {
            uni.showToast({ title: '天气数据获取失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('天气请求失败：', err);
          uni.showToast({ title: '网络异常', icon: 'none' });
        }
      });
    },

    // 功能三：下载网络图片
    downloadNetImage() {
      const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      this.downloadProgress = 0;
      this.downloadedImagePath = '';

      const downloadTask = uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            this.downloadedImagePath = res.tempFilePath;
            uni.showToast({ title: '下载完成', icon: 'success' });
          }
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
          uni.showToast({ title: '下载失败', icon: 'none' });
        }
      });

      downloadTask.onProgressUpdate((progress) => {
        this.downloadProgress = progress.progress;
        console.log('当前下载进度：', progress.progress + '%');
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}
.module {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
h2 {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
}
.btn {
  background-color: #007aff;
  color: #fff;
  padding: 16rpx 32rpx;
  border-radius: 6rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}
.preview-image, .downloaded-image {
  width: 200rpx;
  height: 200rpx;
  object-fit: cover;
  border-radius: 6rpx;
}
.weather-card {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
}
.empty-tip, .download-status {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style>